import { targetCuesActive } from '@/services/api/api-analysis';
import { TinyColumn } from '@ant-design/charts';
import { ClockCircleOutlined, EllipsisOutlined, SmallDashOutlined, UserOutlined } from '@ant-design/icons';
import { StatisticCard } from '@ant-design/pro-card';
import { TableDropdown } from '@ant-design/pro-components';
import { Divider, Dropdown, MenuProps, Radio, Skeleton, Space, Spin } from 'antd';
import { useEffect, useState } from 'react';

interface TargetCuesActiveCardProps { }

const TargetCuesActiveCard: React.FC<TargetCuesActiveCardProps> = ({ }) => {
  const [dataTargetCuesActive, setDataTargetCuesActiveState] =
    useState<AnalysisData.TargetCuesActive>();

  const [loading, setLoading] = useState(false);


  const [dataTabSelectDay, setDataTabSelectDayState] = useState<number>(60);


  /**
   * 主动报送
   * @param key
   */
  const loadTargetCueActiveData = async (day: number) => {

    try {
      const response = await targetCuesActive({ day: -day });
      if (response.code === 0) {
        setDataTargetCuesActiveState(response.data);
      }
      setLoading(false)
    } catch (error) { }
  };


  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    loadTargetCueActiveData(60)
    setDataTabSelectDayState(60)
  };

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    setLoading(true)
    loadTargetCueActiveData(Number(e.key))
    setDataTabSelectDayState(Number(e.key))
  };

  const items: MenuProps['items'] = [
    {
      label: '7天',
      key: '7',
      icon: <ClockCircleOutlined />,
    },
    {
      label: '本月',
      key: '',
      icon: <ClockCircleOutlined />,
    },
    {
      label: '90天',
      key: '90',
      icon: <ClockCircleOutlined />,
    },
  ];

  const menuProps = {
    items,
    onClick: handleMenuClick,
  };


  useEffect(() => {
    loadTargetCueActiveData(dataTabSelectDay);
  }, []);

  return (
    <>
      {dataTargetCuesActive ? (
        <Spin spinning={loading}>
          <StatisticCard
            title='主动报送'
            style={{ backgroundColor: '#F6F7FB'}}
            extra={[
              <>

                <Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
                  60天
                </Dropdown.Button>
              </>
            ]}
            chart={
              <>
                <div >
                  <h2 >报送 {dataTargetCuesActive?.countActive} 条</h2>
                </div>
                <TinyColumn
                  height={46}
                  autoFit={true}
                  color={"#65E0D2"}
                  data={[...dataTargetCuesActive?.trendActives.map((item) => item.value)]}

                  tooltip={{

                    customContent: (x, data) => {
                      if (x != null) {
                        return `${dataTargetCuesActive?.trendActives[x]?.label}: ${data[0].value}`;
                      } else {
                        return '';
                      }
                    },
                  }}
                />
                <Divider />
                <Space>
                  <StatisticCard.Statistic
                    title="周同比"
                    value={Math.abs(dataTargetCuesActive?.weekTrendCount) + ' '}
                    trend={dataTargetCuesActive?.weekTrendCount > 0 ? 'up' : 'down'}
                  />
                  <StatisticCard.Statistic
                    title="月同比"
                    value={Math.abs(dataTargetCuesActive?.monthTrendCount) + ' '}
                    trend={dataTargetCuesActive.monthTrendCount > 0 ? 'up' : 'down'}
                  />
                </Space>
              </>
            }
          />
        </Spin>

      ) : (
        <StatisticCard title="主动报送" extra={<EllipsisOutlined />}>
          <Skeleton active />
        </StatisticCard>
      )}
    </>
  );
};

export default TargetCuesActiveCard;
